<template>
  <div id="home">
    <NavBar class="home-nav">
      <div slot="center">首页</div>
    </NavBar>
    <TabControl class="tabControl" :titles="['流行','新款','精选']" 
    @tabClick="tabClick" ref="tabControl1" v-show="isTabFixed"/>
    
    <Scroll class="home-content" ref="scroll" 
    :probeType="3" :pullUpLoad="true" 
    @scroll="cntentscroll" @pullingUp="loadMore">
      <HomeSwiper :banners="banners" @swiperImgLoad="swiperImgLoad"/>
      <RecommendView :recommends="recommends"/>
      <FeatureView/>
      <TabControl class="tabControl" :titles="['流行','新款','精选']" 
      @tabClick="tabClick" ref="tabControl2"/>
      <GoodsList :goods="showGoods"/>
    </Scroll>
    <BackTop @click.native="toTop" v-show="isShowBackTop"/>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from 'components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll'
import HomeSwiper from './childComps/HomeSwiper'
import RecommendView from './childComps/RecommendView'
import FeatureView from './childComps/FeatureView'
import BackTop from 'components/content/backTop/BackTop'
import {getHomeMultidata,getHomeGoods} from 'network/home'
import { debounce } from 'common/utils.js'
import { itemListenerMixin,backTopMixin } from 'common/mixin.js'


export default {
  name:'Home',
  components: {
    NavBar,
    TabControl,
    GoodsList,
    HomeSwiper,
    RecommendView,
    FeatureView,
    BackTop,
    Scroll
  },
  mixinx: [itemListenerMixin,backTopMixin],
  data() {
    return {
      banners:[],
      recommends:[],
      goods: {
        'pop':{ page:0,list:[] },
        'new':{ page:0,list:[] },
        'sell':{ page:0,list:[] },
      },
      currentType: 'pop',
      isShowBackTop: false,
      taboffsetTop:0,
      isTabFixed: false,
      saveY:0,
    }
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list
    },
  },
  created() {
    this.getHomeMultidata()
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')

  },
  mounted() {
  },
  activated() {
    this.$refs.scroll.scrollTo(0,this.saveY,0);
    this.$refs.scroll.refresh();
  },
  deactivated() {
    //保存滚动的距离
    this.saveY = this.$refs.scroll.scroll.y;
  },
  methods: {
    //事件监听的方法
    tabClick(index) {
      switch(index) {
        case 0:
          this.currentType = 'pop'
          break;
        case 1:
          this.currentType = 'new'
          break;
        case 2:
          this.currentType = 'sell'
          break;
      }
      this.$refs.tabControl1.currentIndex = index;
      this.$refs.tabControl2.currentIndex = index;
    },
    //返回顶部
    toTop() {
      this.$refs.scroll.scrollTo(0,0,500);
    },
    cntentscroll(position) {
      //判断向上是否显示
      this.isShowBackTop = (-position.y) > 1000;
      //判断tabcontrol是否需要吸顶
      this.isTabFixed = (-position.y) > 600;
    },
    //加载更多
    loadMore() {
      this.getHomeGoods(this.currentType);
      this.$refs.scroll.refresh();
    },
    swiperImgLoad() {
      // console.log(this.$refs.tabControl2.$el.offsetTop);
      this.tabControlOffsetTop = this.$refs.tabControl2.$el.offsetTop;
    },
    //网络请求的方法
    getHomeMultidata() {
      getHomeMultidata().then(res => {
        // console.log(res);
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      })
    },
    //获取数据的封装
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type,page).then(res => {
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;

        this.$refs.scroll.finishPullUp();
      }) 
    },
    // finshPullUp() {
    //   this.scroll.finishPullUp();
    // }
  }
}
</script>

<style scoped>
  #home {
    position: relative;
    height: 100vh;
    /* padding-top: 44px; */
  }
  .home-nav {
    background-color: #ff5777;
    color: white;
  }
  .tabControl {
    position: relative;
    z-index: 3;
  }
  .home-content {
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }
</style>